<template>
  <div class="index">
    <el-container style="height:1000px">
      <el-header>
        Supreme!!! {{count}} {{countAlias}} {{count2}} {{doneTodosCount}} 
        <el-dropdown @command="handleCommand">
					<span class="el-dropdown-link">
						你好！{{userInfo.email}} <i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu>
						<el-dropdown-item command="1">用户信息</el-dropdown-item>
						<el-dropdown-item command="2">安全退出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<img :src="userInfo.avatar_path" class="img-circle" />
				<!-- <img src="../assets/logo.png" class="img-circle" /> -->
        
        <!-- <router-link :to="{ name: 'login'} ">登入</router-link> -->
        <!-- <el-button type="text" @click="logout" >安全退出</el-button> -->
      </el-header>
      
      <el-container>
        <el-aside width="200px">
          <el-menu 
          background-color="#545c64"
          text-color="#fff"
          :router="true"
          active-text-color="#ffd04b">
            <el-submenu 
            :index="item.id.toString()" 
            :key="item.id" 
            v-for="item in menu">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.title}}</span>
              </template>
              <el-menu-item 
              :key="i.id"
              :index="i.route"
              v-for="i in item.sub_permission"
              :route="{name: i.route, params: {}}">
              {{i.title}}
              </el-menu-item>
            </el-submenu>
          </el-menu>

        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

		<!-- 用户信息dialog -->
		<el-dialog class="dialog" title="个人资料" :visible.sync="dialogVisibleUser" width="30%">
      <user-info :infoForm="userInfo" @update="dialogVisibleUser=false"></user-info>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState, mapGetters } from 'vuex';
import sdApi from '../api/sd';
import Storage from '../storage';
import UserInfo from './user/UserInfo.vue';

export default {
	components: { UserInfo },
  name: 'index',
  props: {
    msg: String
  },
  /* computed: mapState({
    count: state => state.count,//箭头函数
    countAlias: 'count',
    
  }), */

  data() {
    return {
      status: 0,
      menu: '',
			userInfo: {},
      dialogVisibleUser: false,
      // imgPrefix: 'http://sd.martin.net/storage/',
    };
  },
//计算属性
  computed: {
    count() {  
      return this.$store.state.count;
    },
    ...mapState({
      count2: state => state.count,//箭头函数
      countAlias: 'count',
    }),
    ...mapGetters([
      'doneTodosCount',
      'imgPrefix'
    ])
  },

  created() {
    this.getMenu();
    this.showUser();
  },

  methods: {
    getMenu() {
      sdApi.showMenu().then((res) => {
        this.menu = res.data.menuDat;
      });
    },
    showUser() {
      sdApi.showUser().then((res) => {
        // console.log(res.data.user);
				this.userInfo = res.data.user;
				//用户头像
				let avatar_path = this.userInfo.avatar_path;
				if (this.userInfo.avatar_path) {
            avatar_path = this.imgPrefix + avatar_path;
          } else {
            avatar_path = '../assets/user-def.jpg';
				}
				this.userInfo.avatar_path = avatar_path;
      });
    },

    logout() {
      Storage.removeSession();
      this.$router.push( {path: 'login'});
		},

		handleCommand(command) {
			switch(command) {
				case '1':
					this.dialogVisibleUser = true;
					break;
				case '2':
					this.logout();
					break;	

			}
		}
  }
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
	.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

	.el-icon-arrow-down {
    font-size: 12px;
  }

	.img-circle {
		border-radius: 50%;
		width: 50px;
		height: 50px;
		vertical-align: middle;
	}
  
  
</style>
